<template>
	<view class="newBox" v-if="show">
		<uni-nav-bar class="navBar" :title="newList.title" v-if="isNavShow">
			<view slot="left" @click="goBack">
				<u-icon name="arrow-left" size="40"></u-icon>
			</view>
		</uni-nav-bar>
		<view class="newTop">
			<!-- 毛玻璃 -->
			<helang-blur :params="params"></helang-blur>
			<view class="baseInfo">
				<image class="home" src="../../static/images/home.png" @click="goHome"></image>
				<view class="content">
					<view class="title">
						{{newList.title}}
					</view>
					<view class="detailInfo">
						{{newList.author}} {{newList.created_at}} 发布 {{newList.hits}}阅读
					</view>
				</view>
			</view>
		</view>
		<!-- 富文本解析 -->
		<uParse :content="newList.content"></uParse>
		<view class="line"></view>
		<comment :newInfo="newList" type="newDetail"></comment>
	</view>
</template>

<script>
	// 引入导航栏
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	// 引入毛玻璃
	import helangBlur from "@/components/helang-blur/helang-blur.vue"
	// 引入富文本解析器
	import uParse from "@/components/feng-parse/parse.vue"
	// 格式化日期的函数
	import filterTime from '@/components/utils/filterTime.js'
	// 引入最新评论组件
	import comment from '@/components/comment/comment.vue'
	export default {
		data() {
			return {
				newList: {},
				params: {
					width: "750rpx",
					height: "520rpx",
					image: '',
					blur: "xs"
				},
				isNavShow: false,
				newId: 0,
				show: false
			}
		},
		components: {
			helangBlur,
			uParse,
			comment
		},
		onLoad(option) {
			this.getnewDetail(option.id)
		},
		onPageScroll(e) {
			if (e.scrollTop > 100) {
				this.isNavShow = true
			} else {
				this.isNavShow = false
			}
		},
		methods: {
			// 获取指定 ID 的资讯详情
			async getnewDetail(id) {
				let {data} = await this.$u.api.getNewDetail({
					id
				})
				// 通过正则将得到的不规则数据转换为标准的html格式
				let newContent = data.content.replace(/@!\[.*\]\((\d*)\)/g, "<img src='" + this.BaseFileURL + '$1' +
					"' />")
				newContent = newContent.replace(/\s\D\s/g, "<p></p>")
				this.newList = {
					...data,
					created_at: filterTime(data.created_at),
					content: newContent
				}
				this.params.image = this.BaseFileURL + data.id
				this.newId = data.id
				this.show = true
			},
			// 回到主页
			goHome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			// 回到上一页
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.newBox {
		.navBar {
			width: 100%;
			position: fixed;
			left: 0;
			top: 0;

			::v-deep.uni-nav-bar-text {
				width: 400rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap
			}
		}

		.newTop {
			position: relative;
			width: 100%;
			height: 520upx;

			.baseInfo {
				position: absolute;
				left: 0;
				top: 0;
				z-index: 9;
				width: 100%;
				height: 520upx;
				background-color: rgba(54, 65, 97, 0.3);

				.home {
					position: absolute;
					top: 20upx;
					left: 20upx;
					width: 46upx;
					height: 46upx;
				}

				.content {
					position: absolute;
					left: 20upx;
					bottom: 20upx;
					color: #fff;

					.title {
						font-size: 44upx;
						margin-bottom: 30upx;
					}

					.detailInfo {
						font-size: 24upx;
					}
				}
			}
		}

		::v-deep.wxParse {
			margin: 20rpx 25rpx 30rpx;
			width: 700rpx;
		}
		.line{
			width: 100%;
			height: 30rpx;
			background-color: #f3f3f3;
		}
		
	}
	
</style>
